import React, { useState, useEffect } from "react";
import { AtInput } from "taro-ui";
import Taro from "@tarojs/taro";
import { View, Image, Text, Button } from "@tarojs/components";

import api from "@api/api.js";
import Label from "@cmp/label/index.jsx";
import SelectDown from "@cmp/select/index.jsx";

export default (props) => {
  const [caseList, setCase] = useState([]); // 案例列表
  // 删除手术
  const delectOt = async (paramId) => {
    const { code, data } = await api.deleteSurgicalDetail(paramId);
    if (code == 200) {
      props.useDepFn(props.clinicSchemesId);
    }
    Taro.showToast({
      title: code == 200 ? "手术删除成功" : data,
      icon: "none",
      duration: 2000,
    });
  };
  // 删除材料
  const deleteMt = async (paramId) => {
    const { code, data } = await api.deleteSurgicalMaterials(paramId);
    if (code == 200) {
      props.useDepFn(props.clinicSchemesId);
    }
    Taro.showToast({
      title: code == 200 ? "材料删除成功" : data,
      icon: "none",
      duration: 2000,
    });
  };
  // 获取案例列表
  const getCase = async (id, type, fn) => {
    const list = id ? id : [];
    const subjectIds = [];
    list.map((item) => subjectIds.push(item.materialsSubjectId));
    const { data } = await (type == "public"
      ? api.getPublicCases({ subjectIds })
      : api.getOneselfCases({ subjectIds }));
    setCase(data);
    fn && fn();
  };
  // 保存选择的案例
  const selectCase = async (item, surgicalSchemesId) => {
    props.savePlan();
    const { code } = await api.savePricingSchemes(
      { caseDataId: item.id },
      surgicalSchemesId
    );
    if (code == 200) {
      props.getClinicSchemesDetail(props.clinicSchemesId);
    }
  };
  return (
    <>
      <View className="listBox">
        <View className="doctor borderBottom myButton">
          <Image src={api.bseUrl + props.counselorInfo.headimgurl} />
          <View className="name fontBold">
            {props.counselorInfo.name}
            <View className="font">{props.counselorInfo.position}</View>
          </View>
          <Button className="send font" openType="share">
            发送方案给医生
          </Button>
        </View>
      </View>
      {props.list &&
        props.list.map((item, index) => {
          return (
            <View className="information listBox" key={index}>
              {/* 手术 */}
              <View className="operation borderBottom">
                <View className="fontBold">
                  {item.surgicalName}
                  <View
                    className="iconfont icon-shanchu"
                    onClick={() => {
                      delectOt(item.surgicalSchemesId);
                    }}
                  ></View>
                </View>
                <View className="operationList">
                  <Label
                    keyName="surgicalMaterialsId"
                    value="materialsName"
                    list={item.surgicalMaterialsList}
                    onDelete={(id) => {
                      deleteMt(id);
                    }}
                  />
                </View>
              </View>
              {/* 就诊次数 */}
              <View className="operation borderBottom input">
                <View className="fontBold">预计就诊次数</View>
                <AtInput
                  value={item.numberOfDiag}
                  name={"numberOfDiag" + index}
                  placeholder="请输入预计就诊次数"
                  placeholderClass="font"
                  onChange={props.savePlanInfo.bind(
                    this,
                    "numberOfDiag",
                    index
                  )}
                />
              </View>
              {/* 相似案例 */}
              <View className="plan borderBottom">
                <View className="label">
                  <View className="fontBold">相似案例</View>
                  <View className="select">
                    <SelectDown
                      data={caseList}
                      title={"公共案例"}
                      className="downSelect"
                      selectValue={item.caseDataId}
                      onclick={(fn) => {
                        getCase(item.surgicalMaterialsList, "public", fn);
                      }}
                      onchange={(id) => {
                        selectCase(id, item.surgicalSchemesId);
                      }}
                    />
                    <SelectDown
                      data={caseList}
                      title={"我的案例"}
                      titleClass="downSelect"
                      selectValue={item.caseDataId}
                      onclick={(fn) => {
                        getCase(item.surgicalMaterialsList, "", fn);
                      }}
                      onchange={(id) => {
                        selectCase(id, item.surgicalSchemesId);
                      }}
                    />
                  </View>
                </View>
                <View className="at-row at-row__justify--between borderBottom">
                  <View className="at-col at-col-5">
                    <View className="font">术前</View>
                    <View className="planImg">
                      {item.caseData &&
                        item.caseData.beforeImg.map((item) => {
                          return <Image src={api.bseUrl + item.path} />;
                        })}
                    </View>
                  </View>
                  <View className="at-col at-col-5">
                    <View className="font">术后</View>
                    <View className="planImg">
                      {item.caseData &&
                        item.caseData.afterImg.map((item) => {
                          return <Image src={api.bseUrl + item.path} />;
                        })}
                    </View>
                  </View>
                </View>
              </View>
              {/* 备注 */}
              <View className="operation remarks input">
                <View className="fontBold">备注</View>
                <AtInput
                  value={item.remarks}
                  name={"remarks" + index}
                  placeholder="请输入备注内容"
                  onChange={props.savePlanInfo.bind(this, "remarks", index)}
                />
              </View>
            </View>
          );
        })}
    </>
  );
};
